<template>
  <div class="UserList">
    <el-table :data="tableData" border stripe style="width: 100%" height="800">
      <el-table-column prop="name" label="用户名" width="180" fixed="left" align="center" />
      <el-table-column prop="phone" label="手机号" width="180" align="center" />
      <el-table-column prop="mail" label="邮箱" width="180" align="center" />
      <el-table-column prop="register" label="注册时间" width="180" align="center" />
      <el-table-column prop="isReal" label="实名认证" width="180" align="center" />
      <el-table-column prop="isVip" label="是否会员" width="180" align="center" />
      <el-table-column prop="isSeller" label="是否店家" width="180" align="center" />
      <el-table-column label="操作" width="220" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDetail(scope.$index, scope.row)">查看</el-button>
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination />
    </div>
    <detail-modal :visible="detail_visible" @close="handleClose" />
    <edit-modal :visible="edit_visible" @close="handleClose" />
  </div>
</template>

<script>
import DetailModal from './detailModal';
import EditModal from './editModal';
import Pagination from '@/components/Pagination';

export default {
  name: '',
  components: {
    DetailModal,
    EditModal,
    Pagination
  },
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      detail_visible: false,
      edit_visible: false
    };
  },
  methods: {
    handleDetail (index, row) {
      this.detail_visible = true;
    },
    handleEdit (index, row) {
      this.edit_visible = true;
    },
    handleDelete (index, row) {
    },
    handleClose () {
      this.edit_visible = false;
      this.detail_visible = false;
    }
  },
}
</script>
<style lang='scss' scoped src="./index.scss">